<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>5.键盘事件</title>
		<style>
			input{
				width: 300px;
			}
		</style>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>{{msg}}</h2>
			<!-- 常用的9个按键（牢牢掌握） -->
			<input type="text" placeholder="按下回车，提示你的输入" @keyup.enter="show"> <br><br>
			<input type="text" placeholder="按下删除，提示你的输入" @keyup.delete="show"> <br><br>
			<input type="text" placeholder="按下esc，提示你的输入" @keyup.esc="show"> <br><br>
			<input type="text" placeholder="按下空格，提示你的输入" @keyup.space="show"> <br><br>
			<input type="text" placeholder="按下tab，提示你的输入" @keydown.tab="show"> <br><br>
			<input type="text" placeholder="按下↑，提示你的输入" @keyup.up="show"> <br><br>
			<input type="text" placeholder="按下↓，提示你的输入" @keyup.down="show"> <br><br>
			<input type="text" placeholder="按下←，提示你的输入" @keyup.left="show"> <br><br>
			<input type="text" placeholder="按下→，提示你的输入" @keyup.right="show"> <br><br>
			<hr>

			<!-- 如果不是上面的这9个常用，如何绑定事件？ -->
			<!-- 第一种：通过该按键最原始的按键名(key)去绑定（了解即可） -->
			<input type="text" placeholder="按下a，提示你的输入" @keyup.a="show"> <br><br>
			<input type="text" placeholder="按下CapsLock，提示你的输入" @keyup.caps-lock="show"><br><br>
			<!-- 第一种：通过该按键最原始的按键名(keyCode)去绑定（了解即可） -->
			<input type="text" placeholder="按下a，提示你的输入" @keyup.65="show"> <br><br>
			<input type="text" placeholder="按下CapsLock，提示你的输入" @keyup.20="show"><br><br>
			<hr>
			<!-- ctrl是系统修饰键，若需要单独绑定事件，要用keydown（了解即可） -->
			<input type="text" placeholder="按下ctrl，提示你的输入" @keydown.ctrl="show"><br><br>
			<input type="text" placeholder="按下ctrl，提示你的输入" @keyup.ctrl="show"><br><br>
			<input type="text" placeholder="按下ctrl+c，提示你的输入" @keyup.ctrl.c="show">

		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					msg:'欢迎来到尚硅谷！'
				},
				methods:{
					show(e){
						console.log(e.key,e.keyCode)
					}
				}
			})
		</script>
	</body>
</html>